<template>
  <div class="m-notify" :class="classes">
    <div>
      <span v-html="mes"></span>
    </div>
  </div>
</template>

<script type="text/babel">
  export default {
    data () {
      return {
        classes: ''
      }
    },
    props: {
      mes: String,
      timeout: Number,
      callback: Function
    }
  }
</script>
<style lang="less" scoped>
  // Notify =================
  .m-notify {
    position: fixed;
    bottom: 50%;
    left: 0;
    width: 100%;
    font-size: 32px; /* px */
    color: #FFF;
    word-break: break-all;
    text-align: center;
    z-index: 10000;
    pointer-events: none;
    display: block;
    transition: all .3s ease;
    &.init {
      bottom: 50%;
    }
    div{
      background: rgba(0, 0, 0, 0.6);
      padding: .8rem 0;
      border-radius: 10px;
      width:95%;
      margin:0 auto;
      span {
        display: inline-block;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        padding: 0 60px;
        font-size: .8rem;
        color: #fff;
      }
    }
    }
</style>
